<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()
const taskId = route.params.id  // 从路由获取任务 ID

// 响应式任务对象（初始为 null，避免直接访问 undefined）
const task = ref(null)  
const isEditing = ref(false)
const editedTask = ref({})      // 编辑中的任务副本

// 组件挂载后加载任务
onMounted(() => {
  loadTask()
})

// 核心：从 localStorage 加载任务
const loadTask = () => {
  // 1. 读取所有任务（统一存储在 localStorage.tasks 中）
  const tasks = JSON.parse(localStorage.getItem('tasks')) || []
  
  // 2. 根据 ID 查找任务（注意：路由参数是字符串，任务 ID 是数字，用 == 匹配）
  task.value = tasks.find(t => t.id == taskId)
  
  // 3. 处理任务不存在的情况
  if (!task.value) {
    alert('任务不存在或已删除！')
    router.back() // 跳转回上一页
    return
  }
  
  // 4. 初始化编辑对象（深拷贝，避免直接修改原任务）
  editedTask.value = { ...task.value }
}

// 保存编辑（更新 localStorage 中的任务数组）
const saveEdit = () => {
  editedTask.value.updatedAt = new Date().toISOString()
  
  // 读取并更新任务数组
  const tasks = JSON.parse(localStorage.getItem('tasks')) || []
  const index = tasks.findIndex(t => t.id == taskId)
  
  if (index !== -1) {
    tasks[index] = editedTask.value
    localStorage.setItem('tasks', JSON.stringify(tasks))
    task.value = { ...editedTask.value } // 同步更新显示
    isEditing.value = false
  }
}

// 删除任务（从 localStorage 中移除）
const deleteTask = () => {
  if (confirm('确定删除该任务？')) {
    const tasks = JSON.parse(localStorage.getItem('tasks')) || []
    const newTasks = tasks.filter(t => t.id != taskId) // 过滤掉当前任务
    localStorage.setItem('tasks', JSON.stringify(newTasks))
    router.back()
  }
}

// 标记完成（复用 saveEdit，更新完成状态）
const toggleComplete = () => {
  editedTask.value.completed = !editedTask.value.completed
  
  // ✨ 记录完成时间（仅当标记为完成时）
  if (editedTask.value.completed) {
    editedTask.value.completedAt = new Date().toISOString()
  } else {
    // 取消完成时，可移除 completedAt（可选）
    delete editedTask.value.completedAt
  }
  
  saveEdit() // 保存到 localStorage
}
</script>

<template>
  <!-- 外层容器：统一管理 v-if 和 v-else 的布局 -->
  <div class="task-detail-container">
    <!-- 任务存在时的详情卡片 -->
    <div v-if="task" class="task-detail">
      <!-- 标题 + 操作按钮 -->
      <div class="header-bar">
        <h2 class="title">任务详情</h2>
        <button
          v-if="!isEditing"
          @click="isEditing = true"
          class="edit-btn"
        >
          编辑
        </button>
        <button
          v-if="isEditing"
          @click="saveEdit"
          class="save-btn"
        >
          保存
        </button>
      </div>

      <!-- 表单内容区 -->
      <div class="form-content">
        <!-- 任务名称 -->
        <div class="form-group">
          <label class="label">任务名称</label>
          <div v-if="!isEditing" class="value-text">
            {{ task.title }}
          </div>
          <input
            v-else
            v-model="editedTask.title"
            class="input-field"
          />
        </div>

        <!-- 任务描述 -->
        <div class="form-group">
          <label class="label">任务描述</label>
          <div v-if="!isEditing" class="value-text desc">
            {{ task.description || '无描述' }}
          </div>
          <textarea
            v-else
            v-model="editedTask.description"
            class="input-field"
            rows="3"
          ></textarea>
        </div>

        <!-- 截止日期 -->
        <div class="form-group">
          <label class="label">截止日期</label>
          <div v-if="!isEditing" class="value-text">
            {{ task.dueDate }}
          </div>
          <input
            v-else
            v-model="editedTask.dueDate"
            type="datetime-local"
            class="input-field"
          />
        </div>

        <!-- 优先级 -->
        <div class="form-group">
          <label class="label">优先级</label>
          <div v-if="!isEditing" class="value-badge">
            <span 
              :class="task.priority === '高' ? 'badge high' 
                : task.priority === '中' ? 'badge medium' 
                : 'badge low'"
            >
              {{ task.priority }}
            </span>
          </div>
          <select
            v-else
            v-model="editedTask.priority"
            class="input-field"
          >
            <option value="高">高</option>
            <option value="中">中</option>
            <option value="低">低</option>
          </select>
        </div>

        <!-- 标签 -->
        <div class="form-group tag-section">
          <label class="label">标签</label>
          <div class="tag-list">
            <span
              v-for="tag in task.tags"
              :key="tag"
              class="tag-badge"
            >
              {{ tag }}
            </span>
          </div>
        </div>

        <!-- 时间信息 -->
        <div class="time-info">
          <p>创建时间：{{ new Date(task.createdAt).toLocaleString() }}</p>
          <p>最后修改：{{ new Date(task.updatedAt).toLocaleString() }}</p>
        </div>
      </div>

      <!-- 操作按钮栏 -->
      <div class="action-bar">
        <button
          @click="toggleComplete"
          class="action-btn complete-btn"
        >
          {{ task.completed ? '标记为未完成' : '标记为完成' }}
        </button>
        <button
          @click="deleteTask"
          class="action-btn delete-btn"
        >
          删除任务
        </button>
        <button class="action-btn share-btn">
          分享任务
        </button>
      </div>
    </div>

    <!-- 任务不存在时的兜底提示（与 v-if 同层） -->
    <div v-else class="empty-state">
      任务不存在或已删除
    </div>
  </div>
</template>

<style scoped lang="scss">
// ======================
// 1. 全局变量定义
// ======================
:root {
  --primary: #3b82f6;       /* 主色 - 蓝 */
  --gray-light: #d1d5db;    /* 浅灰边框 */
  --gray-dark: #374151;     /* 深灰文字 */
  --blue-light: #eff6ff;    /* 标签浅蓝背景 */
  --blue-dark: #2563eb;     /* 标签深蓝文字 */
  --red: #dc2626;           /* 红色（删除） */
  --green: #22c55e;         /* 绿色（保存） */
  --gap: 1.25rem;           /* 通用间距 */
  --radius: 8px;            /* 通用圆角 */
}

// ======================
// 2. 外层容器
// ======================
.task-detail-container {
  max-width: 600px;
  margin: 2rem auto;
  min-height: calc(100vh - 8rem);
  padding: 0 1rem; // 小屏幕适配
}

// ======================
// 3. 任务详情卡片
// ======================
.task-detail {
  padding: 2rem;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  border: 1px solid #e5e7eb;
  margin-bottom: 2rem; // 与兜底提示拉开间距
}

// ======================
// 4. 标题与按钮栏
// ======================
.header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--gap);

  .title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-dark);
  }

  .edit-btn, .save-btn {
    padding: 0.6rem 1rem;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    color: #fff;

    &.edit-btn {
      background: var(--primary);
      &:hover {
        opacity: 0.9;
      }
    }

    &.save-btn {
      background: var(--green);
      &:hover {
        opacity: 0.9;
      }
    }
  }
}

// ======================
// 5. 表单组通用样式
// ======================
.form-content {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.form-group {
  display: flex;
  flex-direction: column;

  .label {
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    color: var(--gray-dark);
    font-weight: 500;
  }

  .input-field {
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--gray-light);
    border-radius: var(--radius);
    font-size: 1rem;
    transition: all 0.3s ease;

    &:hover {
      border-color: #9ca3af;
    }

    &:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
    }
  }

  .value-text {
    margin-top: 0.5rem;
    font-size: 1rem;
    color: #333;
    line-height: 1.4;
  }

  .desc {
    white-space: pre-line; /* 支持换行 */
  }
}

// ======================
// 6. 优先级标签
// ======================
.value-badge {
  margin-top: 0.5rem;

  .badge {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    color: #fff;

    &.high {
      background: #dc2626;
    }
    &.medium {
      background: #f59e0b;
    }
    &.low {
      background: #22c55e;
    }
  }
}

// ======================
// 7. 自定义标签
// ======================
.tag-section {
  .tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
  }

  .tag-badge {
    padding: 0.3rem 0.8rem;
    background: var(--blue-light);
    color: var(--blue-dark);
    border-radius: 20px;
    font-size: 0.85rem;
    transition: background 0.3s ease;

    &:hover {
      background: #dbeafe;
    }
  }
}

// ======================
// 8. 时间信息
// ======================
.time-info {
  margin-top: 1rem;
  border-top: 1px solid var(--gray-light);
  padding-top: 1rem;

  p {
    font-size: 0.85rem;
    color: #6b7280;
    margin: 0.3rem 0;
  }
}

// ======================
// 9. 操作按钮栏
// ======================
.action-bar {
  display: flex;
  gap: 1rem;
  margin-top: var(--gap);

  .action-btn {
    flex: 1;
    padding: 0.7rem;
    border-radius: var(--radius);
    border: none;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;

    &.complete-btn {
      background: var(--primary);
      &:hover {
        opacity: 0.9;
      }
    }

    &.delete-btn {
      background: var(--red);
      &:hover {
        opacity: 0.9;
      }
    }

    &.share-btn {
      background: var(--gray-dark);
      &:hover {
        opacity: 0.9;
      }
    }
  }
}

// ======================
// 10. 兜底状态
// ======================
.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 8rem);
  color: #999;
  font-size: 1.1rem;
}
</style>